<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Event Timing API</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="https://wicg.github.io/event-timing" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">Event Timing API</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://wicg.github.io/event-timing">https://wicg.github.io/event-timing</a>
     <dt>Test Suite:
     <dd><a href="https://github.com/web-platform-tests/wpt/tree/master/event-timing">https://github.com/web-platform-tests/wpt/tree/master/event-timing</a>
     <dt class="editor">Editors:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:npm@chromium.org">Nicolás Peña Moreno</a> (<a class="p-org org" href="https://google.com">Google</a>)
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-email email" href="mailto:tdresser@chromium.org">Tim Dresser</a> (<a class="p-org org" href="https://google.com">Google</a>)
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the Event Timing API Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This document defines an API that provides web page authors with insights into the latency of certain events triggered by user interactions.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li>
     <a href="#sec-intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
     <ol class="toc">
      <li><a href="#sec-events-exposed"><span class="secno">1.1</span> <span class="content">Events exposed</span></a>
      <li><a href="#sec-example"><span class="secno">1.2</span> <span class="content">Usage example</span></a>
     </ol>
    <li>
     <a href="#sec-event-timing"><span class="secno">2</span> <span class="content">Event Timing</span></a>
     <ol class="toc">
      <li><a href="#sec-performance-event-timing"><span class="secno">2.1</span> <span class="content"><code class="idl"><span>PerformanceEventTiming</span></code> interface</span></a>
      <li><a href="#sec-event-counts"><span class="secno">2.2</span> <span class="content"><code class="idl"><span>EventCounts</span></code> interface</span></a>
      <li><a href="#sec-extensions"><span class="secno">2.3</span> <span class="content">Extensions to the <code class="idl"><span>Performance</span></code> interface</span></a>
     </ol>
    <li>
     <a href="#sec-processing-model"><span class="secno">3</span> <span class="content">Processing model</span></a>
     <ol class="toc">
      <li><a href="#sec-modifications-DOM"><span class="secno">3.1</span> <span class="content">Modifications to the DOM specification</span></a>
      <li><a href="#sec-modifications-HTML"><span class="secno">3.2</span> <span class="content">Modifications to the HTML specification</span></a>
      <li><a href="#sec-init-event-timing"><span class="secno">3.3</span> <span class="content">Initialize event timing</span></a>
      <li><a href="#sec-fin-event-timing"><span class="secno">3.4</span> <span class="content">Finalize event timing</span></a>
      <li><a href="#sec-dispatch-pending"><span class="secno">3.5</span> <span class="content">Dispatch pending Event Timing entries</span></a>
     </ol>
    <li><a href="#priv-sec"><span class="secno">4</span> <span class="content">Security &amp; privacy considerations</span></a>
    <li><a href="#conformance"><span class="secno"></span> <span class="content"> Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="sec-intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#sec-intro"></a></h2>
   <div class="non-normative">
    <p><em>This section is non-normative.</em></p>
    <p>When a user engages with a website, they expect their actions to cause changes to the website quickly.
In fact, <a href="https://www.nngroup.com/articles/response-times-3-important-limits/">research</a> suggests that any user input that is not handled within 100ms is considered slow.
Therefore, it is important to surface input events that could not achieve those guidelines.</p>
    <p>A common way to monitor event latency consists of registering an event listener.
The timestamp at which the event was created can be obtained via the event’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-timestamp" id="ref-for-dom-event-timestamp">timeStamp</a></code>.
In addition, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/hr-time/#dom-performance-now" id="ref-for-dom-performance-now">performance.now()</a></code> could be called both at the beginning and at the end of the event handler logic.
By subtracting the hardware timestamp from the timestamp obtained at the beginning of the event handler,
the developer can compute the <b>input delay</b>: the time it takes for an input to start being processed.
By subtracting the timestamp obtained at the beginning of the event handler from the timestamp obtained at the end of the event handler,
the developer can compute the amount of synchronous work performed in the event handler.
Finally, when inputs are handled synchronously, the duration from event hardware timestamp to the next paint after the event is handled is a useful user experience metric.</p>
    <p>This approach has several fundamental flaws.
First, requiring event listeners precludes measuring event latency very early in the page load because
listeners will likely not be registered yet at that point in time.
Second, developers that are only interested in the input delay might be forced to add new listeners to events that originally did not have one.
This adds unnecessary performance overhead to the event latency calculation.
And lastly, it would be very hard to measure asynchronous work caused by the event via this approach.</p>
    <p>This specification provides an alternative to event latency monitoring that solves some of these problems.
Since the user agent computes the timestamps, there is no need for event listeners in order to measure performance.
This means that even events that occur very early in the page load can be captured.
This also enables visibility into slow events without requiring analytics providers to attempt to patch and subscribe to every conceivable event.
In addition to this, the website’s performance will not suffer from the overhead of unneeded event listeners.
Finally, this specification allows developers to obtain detailed information about the timing of
the rendering that occurs right after the event has been processed.
This can be useful to measure the overhead of website modifications that are triggered by events.</p>
    <p>The very first user interaction has a disproportionate impact on user experience, and is often disproportionately slow.
It’s slow because it’s often blocked on JavaScript execution that is not properly split into chunks during page load.
The latency of the website’s response to the first user interaction can be considered a key responsiveness and loading metric.
To that effect, this API surfaces all the timing information about this interaction, even when this interaction is not handled slowly.
This allows developers to measure percentiles and improvements without having to register event handlers.
In particular, this API enables measuring the <b>first input delay (FID)</b>, the delay in processing for the first "discrete" input event.</p>
   </div>
   <h3 class="heading settled" data-level="1.1" id="sec-events-exposed"><span class="secno">1.1. </span><span class="content">Events exposed</span><a class="self-link" href="#sec-events-exposed"></a></h3>
   <p>The Event Timing API exposes timing information for certain events.
Certain types of events are considered, and timing information is exposed when the time difference between user input and paint operations that follow input processing exceeds a certain threshold.</p>
   <div class="algorithm" data-algorithm="considered for Event Timing">
     Given an <var>event</var>, to determine if it should be <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="considered-for-event-timing">considered for Event Timing</dfn>, run the following steps: 
    <ol>
     <li data-md>
      <p>If <var>event</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-istrusted" id="ref-for-dom-event-istrusted">isTrusted</a></code> attribute value is set to false, return false.</p>
     <li data-md>
      <p>If <var>event</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type">type</a></code> is one of the following: <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-auxclick" id="ref-for-event-type-auxclick">auxclick</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-click" id="ref-for-event-type-click">click</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-dblclick" id="ref-for-event-type-dblclick">dblclick</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-mousedown" id="ref-for-event-type-mousedown">mousedown</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-mouseenter" id="ref-for-event-type-mouseenter">mouseenter</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-mouseleave" id="ref-for-event-type-mouseleave">mouseleave</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-mouseout" id="ref-for-event-type-mouseout">mouseout</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-mouseover" id="ref-for-event-type-mouseover">mouseover</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-mouseup" id="ref-for-event-type-mouseup">mouseup</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-pointerover-event" id="ref-for-the-pointerover-event">pointerover</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-pointerenter-event" id="ref-for-the-pointerenter-event">pointerenter</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-pointerdown-event" id="ref-for-the-pointerdown-event">pointerdown</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-pointerup-event" id="ref-for-the-pointerup-event">pointerup</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-pointercancel-event" id="ref-for-the-pointercancel-event">pointercancel</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-pointerout-event" id="ref-for-the-pointerout-event">pointerout</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-pointerleave-event" id="ref-for-the-pointerleave-event">pointerleave</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-gotpointercapture-event" id="ref-for-the-gotpointercapture-event">gotpointercapture</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-lostpointercapture-event" id="ref-for-the-lostpointercapture-event">lostpointercapture</a></code> <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/touch-events/#the-touchstart-event" id="ref-for-the-touchstart-event">touchstart</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/touch-events/#the-touchend-event" id="ref-for-the-touchend-event">touchend</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/touch-events/#the-touchcancel-event" id="ref-for-the-touchcancel-event">touchcancel</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-keydown" id="ref-for-event-type-keydown">keydown</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-keyup" id="ref-for-event-type-keyup">keyup</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-beforeinput" id="ref-for-event-type-beforeinput">beforeinput</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-input" id="ref-for-event-type-input">input</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-compositionstart" id="ref-for-event-type-compositionstart">compositionstart</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-compositionupdate" id="ref-for-event-type-compositionupdate">compositionupdate</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-compositionend" id="ref-for-event-type-compositionend">compositionend</a></code>, <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/#event-dnd-dragstart" id="ref-for-event-dnd-dragstart">dragstart</a></code>, <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/#event-dnd-dragend" id="ref-for-event-dnd-dragend">dragend</a></code>, <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/#event-dnd-dragenter" id="ref-for-event-dnd-dragenter">dragenter</a></code>, <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/#event-dnd-dragexit" id="ref-for-event-dnd-dragexit">dragexit</a></code>, <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/#event-dnd-dragleave" id="ref-for-event-dnd-dragleave">dragleave</a></code>, <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/#event-dnd-dragover" id="ref-for-event-dnd-dragover">dragover</a></code>, <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/#event-dnd-drop" id="ref-for-event-dnd-drop">drop</a></code>,
return true.</p>
     <li data-md>
      <p>Return false.</p>
    </ol>
   </div>
   <p class="note" role="note"><span>Note:</span> <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-mousemove" id="ref-for-event-type-mousemove">mousemove</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-pointermove-event" id="ref-for-the-pointermove-event">pointermove</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/touch-events/#the-touchmove-event" id="ref-for-the-touchmove-event">touchmove</a></code>, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-wheel" id="ref-for-event-type-wheel">wheel</a></code>, and <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/#event-dnd-drag" id="ref-for-event-dnd-drag">drag</a></code> are excluded because these are "continuous" events.
The current API does not have enough guidance on how to count and aggregate these events to obtain meaningful performance metrics based on entries.
Therefore, these event types are not exposed.</p>
   <p>The Event Timing API also exposes timing information about the first user interaction among the following:</p>
   <ul>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-keydown" id="ref-for-event-type-keydown①">keydown</a></code></p>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-mousedown" id="ref-for-event-type-mousedown①">mousedown</a></code></p>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-pointerdown-event" id="ref-for-the-pointerdown-event①">pointerdown</a></code> which is followed by <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/pointerevents/#the-pointerup-event" id="ref-for-the-pointerup-event①">pointerup</a></code></p>
    <li data-md>
     <p><code class="idl"><a data-link-type="idl" href="https://w3c.github.io/uievents/#event-type-click" id="ref-for-event-type-click①">click</a></code></p>
   </ul>
   <h3 class="heading settled" data-level="1.2" id="sec-example"><span class="secno">1.2. </span><span class="content">Usage example</span><a class="self-link" href="#sec-example"></a></h3>
<pre class="example highlight" id="example-c36e2dd7"><a class="self-link" href="#example-c36e2dd7"></a>    <c- kr>const</c-> observer <c- o>=</c-> <c- k>new</c-> PerformanceObserver<c- p>(</c-><c- a>function</c-><c- p>(</c->list<c- p>)</c-> <c- p>{</c->
        <c- kr>const</c-> perfEntries <c- o>=</c-> list<c- p>.</c->getEntries<c- p>().</c->forEach<c- p>(</c->entry <c- p>=></c-> <c- p>{</c->
            <c- kr>const</c-> inputDelay <c- o>=</c-> entry<c- p>.</c->processingStart <c- o>-</c-> entry<c- p>.</c->startTime<c- p>;</c->
            <c- c1>// Report the input delay when the processing start was provided.</c->
            <c- c1>// Also report the full input duration via entry.duration.</c->
        <c- p>});</c->
    <c- p>});</c->
    <c- c1>// Register observer for event.</c->
    observer<c- p>.</c->observe<c- p>({</c->entryTypes<c- o>:</c-> <c- p>[</c-><c- u>"event"</c-><c- p>]});</c->
    <c- p>...</c->
    <c- c1>// We can also directly query the first input information.</c->
    <c- k>new</c-> PerformanceObserver<c- p>(</c-><c- a>function</c-><c- p>(</c->list<c- p>,</c-> obs<c- p>)</c-> <c- p>{</c->
        <c- kr>const</c-> firstInput <c- o>=</c-> list<c- p>.</c->getEntries<c- p>()[</c-><c- mi>0</c-><c- p>];</c->

        <c- c1>// Measure the delay to begin processing the first input event.</c->
        <c- kr>const</c-> firstInputDelay <c- o>=</c-> firstInput<c- p>.</c->processingStart <c- o>-</c-> firstInput<c- p>.</c->startTime<c- p>;</c->
        <c- c1>// Measure the duration of processing the first input event.</c->
        <c- c1>// Only use when the important event handling work is done synchronously in the handlers.</c->
        <c- kr>const</c-> firstInputDuration <c- o>=</c-> firstInput<c- p>.</c->duration<c- p>;</c->
        <c- c1>// Process the first input delay and perhaps its duration...</c->

        <c- c1>// Disconnect this observer since callback is only triggered once.</c->
        obs<c- p>.</c->disconnect<c- p>();</c->
    <c- p>}).</c->observe<c- p>({</c->type<c- o>:</c-> <c- t>'first-input'</c-><c- p>,</c-> buffered<c- o>:</c-> <c- kc>true</c-><c- p>});</c->

<c- p>}</c->
</pre>
   <p>The following are sample use cases that could be achieved by using this API:</p>
   <ul>
    <li data-md>
     <p>Gather FID data (see <code class="highlight">firstInputDelay</code> on the example above) on a website and track its performance over time.</p>
    <li data-md>
     <p>Clicking a button changes the sorting order on a table. Measure how long it takes from the click until we display reordered content.</p>
    <li data-md>
     <p>A user drags a slider to control volume. Measure the latency to drag the slider.</p>
    <li data-md>
     <p>Hovering a menu item triggers a flyout menu. Measure the latency for the flyout to appear.</p>
    <li data-md>
     <p>Measure the 75’th percentile of the latency of the first user click (whenever click happens to be the first user interaction).</p>
   </ul>
   <h2 class="heading settled" data-level="2" id="sec-event-timing"><span class="secno">2. </span><span class="content">Event Timing</span><a class="self-link" href="#sec-event-timing"></a></h2>
   <p>Event Timing adds the following interfaces:</p>
   <h3 class="heading settled" data-level="2.1" id="sec-performance-event-timing"><span class="secno">2.1. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#performanceeventtiming" id="ref-for-performanceeventtiming">PerformanceEventTiming</a></code> interface</span><a class="self-link" href="#sec-performance-event-timing"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="performanceeventtiming"><code class="highlight"><c- g>PerformanceEventTiming</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface"><c- n>PerformanceEntry</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp" id="ref-for-idl-def-domhighrestimestamp"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-performanceeventtiming-processingstart" id="ref-for-dom-performanceeventtiming-processingstart"><c- g>processingStart</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp" id="ref-for-idl-def-domhighrestimestamp①"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-performanceeventtiming-processingend" id="ref-for-dom-performanceeventtiming-processingend"><c- g>processingEnd</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-performanceeventtiming-cancelable" id="ref-for-dom-performanceeventtiming-cancelable"><c- g>cancelable</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a> <dfn class="idl-code" data-dfn-for="PerformanceEventTiming" data-dfn-type="method" data-export data-lt="toJSON()" id="dom-performanceeventtiming-tojson"><code class="highlight"><c- g>toJSON</c-></code><a class="self-link" href="#dom-performanceeventtiming-tojson"></a></dfn>();
};
</pre>
   <p class="note" role="note"><span>Note:</span> A user agent implementing the Event Timing API would need to include "<code class="highlight">first<c- o>-</c->input</code>" and "<code class="highlight">event</code>" in <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute" id="ref-for-supportedentrytypes-attribute">supportedEntryTypes</a></code> for <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window">Window</a></code> contexts.
This allows developers to detect support for event timing.</p>
   <div class="non-normative">
    <p><em> This remainder of this section is non-normative.
    The values of the attributes of <code class="idl"><a data-link-type="idl" href="#performanceeventtiming" id="ref-for-performanceeventtiming①">PerformanceEventTiming</a></code> are set in the processing model in <a href="#sec-processing-model">§ 3 Processing model</a>.
    This section provides an informative summary of how they will be set. </em></p>
    <p>Each <code class="idl"><a data-link-type="idl" href="#performanceeventtiming" id="ref-for-performanceeventtiming②">PerformanceEventTiming</a></code> object reports timing information about an <dfn class="dfn-paneled" data-dfn-for="PerformanceEventTiming" data-dfn-type="dfn" data-noexport id="performanceeventtiming-associated-event">associated <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event" id="ref-for-event">Event</a></code></dfn>.</p>
    <p><code class="idl"><a data-link-type="idl" href="#performanceeventtiming" id="ref-for-performanceeventtiming③">PerformanceEventTiming</a></code> extends the following attributes of the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface①">PerformanceEntry</a></code> interface:</p>
    <dl>
     <dt><code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name">name</a></code>
     <dd>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name①">name</a></code> attribute’s getter provides the <a data-link-type="dfn" href="#performanceeventtiming-associated-event" id="ref-for-performanceeventtiming-associated-event">associated event</a>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type①">type</a></code>.
     <dt><code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype">entryType</a></code>
     <dd>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype①">entryType</a></code> attribute’s getter returns "<code class="highlight">event</code>" (for long events) or "<code class="highlight">first<c- o>-</c->input</code>" (for the first user interaction).
     <dt><code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime">startTime</a></code>
     <dd>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime①">startTime</a></code> attribute’s getter returns the <a data-link-type="dfn" href="#performanceeventtiming-associated-event" id="ref-for-performanceeventtiming-associated-event①">associated event</a>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-timestamp" id="ref-for-dom-event-timestamp①">timeStamp</a></code>.
     <dt><code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration">duration</a></code>
     <dd>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration①">duration</a></code> attribute’s getter returns the difference between
    the time of the first <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering" id="ref-for-update-the-rendering">update the rendering</a> step occurring after <a data-link-type="dfn" href="#performanceeventtiming-associated-event" id="ref-for-performanceeventtiming-associated-event②">associated event</a> has been dispatched
    and the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime②">startTime</a></code>, rounded to the nearest 8ms.
    </dl>
    <p><code class="idl"><a data-link-type="idl" href="#performanceeventtiming" id="ref-for-performanceeventtiming④">PerformanceEventTiming</a></code> has the following additional attributes:</p>
    <dl>
     <dt><code class="idl"><a data-link-type="idl" href="#dom-performanceeventtiming-processingstart" id="ref-for-dom-performanceeventtiming-processingstart①">processingStart</a></code>
     <dd> The <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceEventTiming" data-dfn-type="attribute" data-export id="dom-performanceeventtiming-processingstart"><code class="highlight">processingStart</code></dfn> attribute’s getter returns a timestamp captured at the beginning of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch">event dispatch algorithm</a>. This is when event handlers are about to be executed. 
     <dt><code class="idl"><a data-link-type="idl" href="#dom-performanceeventtiming-processingend" id="ref-for-dom-performanceeventtiming-processingend①">processingEnd</a></code>
     <dd> The <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceEventTiming" data-dfn-type="attribute" data-export id="dom-performanceeventtiming-processingend"><code class="highlight">processingEnd</code></dfn> attribute’s getter returns a timestamp captured at the end of the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch①">event dispatch algorithm</a>. This is when event handlers have finished executing. It’s equal to <code class="idl"><a data-link-type="idl" href="#dom-performanceeventtiming-processingstart" id="ref-for-dom-performanceeventtiming-processingstart②">processingStart</a></code> when there are no such event handlers. 
     <dt><code class="idl"><a data-link-type="idl" href="#dom-performanceeventtiming-cancelable" id="ref-for-dom-performanceeventtiming-cancelable①">cancelable</a></code>
     <dd> The <dfn class="dfn-paneled idl-code" data-dfn-for="PerformanceEventTiming" data-dfn-type="attribute" data-export id="dom-performanceeventtiming-cancelable"><code class="highlight">cancelable</code></dfn> attribute’s getter returns the <a data-link-type="dfn" href="#performanceeventtiming-associated-event" id="ref-for-performanceeventtiming-associated-event③">associated event</a>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-cancelable" id="ref-for-dom-event-cancelable">cancelable</a></code> attribute value. 
    </dl>
   </div>
   <h3 class="heading settled" data-level="2.2" id="sec-event-counts"><span class="secno">2.2. </span><span class="content"><code class="idl"><a data-link-type="idl" href="#eventcounts" id="ref-for-eventcounts">EventCounts</a></code> interface</span><a class="self-link" href="#sec-event-counts"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="eventcounts"><code class="highlight"><c- g>EventCounts</c-></code></dfn> {
    <c- b>readonly</c-> <c- b>maplike</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a>, <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long-long" id="ref-for-idl-unsigned-long-long"><c- b>unsigned</c-> <c- b>long</c-> <c- b>long</c-></a>>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#eventcounts" id="ref-for-eventcounts①">EventCounts</a></code> object is a map where the keys are event <a href="Event/type">types</a> and the values are the number of events that have been dispatched that are of that <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type②">type</a></code>.
Only events whose <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type③">type</a></code> is supported by <code class="idl"><a data-link-type="idl" href="#performanceeventtiming" id="ref-for-performanceeventtiming⑤">PerformanceEventTiming</a></code> entries (see section <a href="#sec-events-exposed">§ 1.1 Events exposed</a>) are counted via this map.</p>
   <h3 class="heading settled" data-level="2.3" id="sec-extensions"><span class="secno">2.3. </span><span class="content">Extensions to the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/hr-time/#dfn-performance" id="ref-for-dfn-performance">Performance</a></code> interface</span><a class="self-link" href="#sec-extensions"></a></h3>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/hr-time/#dfn-performance" id="ref-for-dfn-performance①"><c- g>Performance</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#eventcounts" id="ref-for-eventcounts②"><c- n>EventCounts</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="Performance" data-dfn-type="attribute" data-export data-readonly data-type="EventCounts" id="dom-performance-eventcounts"><code class="highlight"><c- g>eventCounts</c-></code></dfn>;
};
</pre>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-performance-eventcounts" id="ref-for-dom-performance-eventcounts">eventCounts</a></code> attribute’s getter returns a map with entries of the form <var>type</var> → <var>numEvents</var>.
This means that there have been <var>numEvents</var> dispatched such that their <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type④">type</a></code> attribute value is equal to <var>type</var>.</p>
   <h2 class="heading settled" data-level="3" id="sec-processing-model"><span class="secno">3. </span><span class="content">Processing model</span><a class="self-link" href="#sec-processing-model"></a></h2>
   <h3 class="heading settled" data-level="3.1" id="sec-modifications-DOM"><span class="secno">3.1. </span><span class="content">Modifications to the DOM specification</span><a class="self-link" href="#sec-modifications-DOM"></a></h3>
   <p><em>This section will be removed once the <a href="https://dom.spec.whatwg.org">DOM specification</a> has been modified.</em></p>
   <div class="algorithm" data-algorithm="additions to event dispatch">
     We modify the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch②">event dispatch algorithm</a> as follows. 
    <p>Right after step 1, we add the following step:</p>
    <ul>
     <li data-md>
      <p>Let <var>timingEntry</var> be the result of <a data-link-type="dfn" href="#initialize-event-timing" id="ref-for-initialize-event-timing">initializing event timing</a> given <em>event</em> and the <a data-link-type="dfn" href="https://w3c.github.io/hr-time/#dfn-current-high-resolution-time" id="ref-for-dfn-current-high-resolution-time">current high resolution time</a>.</p>
    </ul>
    <p>Right before the returning step of that algorithm, add the following step:</p>
    <ul>
     <li data-md>
      <p><a data-link-type="dfn" href="#finalize-event-timing" id="ref-for-finalize-event-timing">Finalize event timing</a> passing <var>timingEntry</var>, <em>target</em>, and the <a data-link-type="dfn" href="https://w3c.github.io/hr-time/#dfn-current-high-resolution-time" id="ref-for-dfn-current-high-resolution-time①">current high resolution time</a> as inputs.</p>
    </ul>
   </div>
   <p class="note" role="note"><span>Note:</span> If a user agent skips the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-dispatch" id="ref-for-concept-event-dispatch③">event dispatch algorithm</a>, it can still choose to include an entry for that <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#event" id="ref-for-event①">Event</a></code>.
In this case, it will estimate the value of <code class="idl"><a data-link-type="idl" href="#dom-performanceeventtiming-processingstart" id="ref-for-dom-performanceeventtiming-processingstart③">processingStart</a></code> and set the <code class="idl"><a data-link-type="idl" href="#dom-performanceeventtiming-processingend" id="ref-for-dom-performanceeventtiming-processingend②">processingEnd</a></code> to the same value.</p>
   <h3 class="heading settled" data-level="3.2" id="sec-modifications-HTML"><span class="secno">3.2. </span><span class="content">Modifications to the HTML specification</span><a class="self-link" href="#sec-modifications-HTML"></a></h3>
   <p><em>This section will be removed once the <a href="https://html.spec.whatwg.org/multipage">HTML specification</a> has been modified.</em></p>
   <p>Each <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window①">Window</a></code> has <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pending-event-entries">pending event entries</dfn>, a list that stores <code class="idl"><a data-link-type="idl" href="#performanceeventtiming" id="ref-for-performanceeventtiming⑥">PerformanceEventTiming</a></code> objects, which will initially be empty.
Each <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window②">Window</a></code> also has <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="pending-pointer-down">pending pointer down</dfn>, a pointer to a <code class="idl"><a data-link-type="idl" href="#performanceeventtiming" id="ref-for-performanceeventtiming⑦">PerformanceEventTiming</a></code> entry which is initially null.
Finally, each <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window③">Window</a></code> has <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="has-dispatched-input-event">has dispatched input event</dfn>, a boolean which is initially set to false.</p>
   <div class="algorithm" data-algorithm="additions to update rendering">
     In the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering" id="ref-for-update-the-rendering①">update the rendering</a> step of the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model" id="ref-for-event-loop-processing-model">event loop processing model</a>, add a step right after the step that calls <a data-link-type="dfn" href="https://w3c.github.io/paint-timing/#mark-paint-timing" id="ref-for-mark-paint-timing">mark paint timing</a>: 
    <ol>
     <li data-md>
      <p>For each <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#fully-active" id="ref-for-fully-active">fully active</a> <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document">Document</a></code> in <em>docs</em>, invoke the algorithm to <a data-link-type="dfn" href="#dispatch-pending-event-timing-entries" id="ref-for-dispatch-pending-event-timing-entries">dispatch pending Event Timing entries</a> for that <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document①">Document</a></code>.</p>
    </ol>
   </div>
   <h3 class="heading settled" data-level="3.3" id="sec-init-event-timing"><span class="secno">3.3. </span><span class="content">Initialize event timing</span><a class="self-link" href="#sec-init-event-timing"></a></h3>
   <div class="algorithm" data-algorithm="initialize event timing">
     When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="initialize-event-timing">initialize event timing</dfn>, with <var>event</var> and <var>processingStart</var> as inputs, run the following steps: 
    <ol>
     <li data-md>
      <p>If the algorithm to determine if <var>event</var> should be <a data-link-type="dfn" href="#considered-for-event-timing" id="ref-for-considered-for-event-timing">considered for Event Timing</a> returns false, then return null.</p>
     <li data-md>
      <p>Let <var>timingEntry</var> be a new <code class="idl"><a data-link-type="idl" href="#performanceeventtiming" id="ref-for-performanceeventtiming⑧">PerformanceEventTiming</a></code> object.</p>
     <li data-md>
      <p>Set <var>timingEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name②">name</a></code> to <var>event</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-type" id="ref-for-dom-event-type⑤">type</a></code> attribute value.</p>
     <li data-md>
      <p>Set <var>timingEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype②">entryType</a></code> to "<code class="highlight">event</code>".</p>
     <li data-md>
      <p>Set <var>timingEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime③">startTime</a></code> to <var>event</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-timestamp" id="ref-for-dom-event-timestamp②">timeStamp</a></code> attribute value.</p>
     <li data-md>
      <p>Set <var>timingEntry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceeventtiming-processingstart" id="ref-for-dom-performanceeventtiming-processingstart④">processingStart</a></code> to <var>processingStart</var>.</p>
     <li data-md>
      <p>Set <var>timingEntry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceeventtiming-cancelable" id="ref-for-dom-performanceeventtiming-cancelable②">cancelable</a></code> to <var>event</var>’s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-cancelable" id="ref-for-dom-event-cancelable①">cancelable</a></code> attribute value.</p>
     <li data-md>
      <p>Return <var>timingEntry</var>.</p>
    </ol>
   </div>
   <h3 class="heading settled" data-level="3.4" id="sec-fin-event-timing"><span class="secno">3.4. </span><span class="content">Finalize event timing</span><a class="self-link" href="#sec-fin-event-timing"></a></h3>
   <div class="algorithm" data-algorithm="finalize event timing">
     When asked to to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="finalize-event-timing">finalize event timing</dfn>, with <var>timingEntry</var>, <var>target</var>, and <var>processingEnd</var> as inputs, run the following steps: 
    <ol>
     <li data-md>
      <p>If <var>timingEntry</var> is null, return.</p>
     <li data-md>
      <p>Let <var>relevantGlobal</var> be <var>target</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global" id="ref-for-concept-relevant-global">relevant global object</a>.</p>
     <li data-md>
      <p>If <var>relevantGlobal</var> does not <a data-link-type="dfn" href="https://heycam.github.io/webidl/#implements" id="ref-for-implements">implement</a> <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/window-object.html#window" id="ref-for-window④">Window</a></code>, return.</p>
     <li data-md>
      <p>Set <var>timingEntry</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performanceeventtiming-processingend" id="ref-for-dom-performanceeventtiming-processingend③">processingEnd</a></code> to <var>processingEnd</var>.</p>
     <li data-md>
      <p>Append <var>timingEntry</var> to <var>relevantGlobal</var>’s <a data-link-type="dfn" href="#pending-event-entries" id="ref-for-pending-event-entries">pending event entries</a>.</p>
    </ol>
   </div>
   <h3 class="heading settled" data-level="3.5" id="sec-dispatch-pending"><span class="secno">3.5. </span><span class="content">Dispatch pending Event Timing entries</span><a class="self-link" href="#sec-dispatch-pending"></a></h3>
   <div class="algorithm" data-algorithm="dispatch pending Event Timing entries">
     When asked to <dfn class="dfn-paneled" data-dfn-type="dfn" data-export id="dispatch-pending-event-timing-entries">dispatch pending Event Timing entries</dfn> for a <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#document" id="ref-for-document②">Document</a></code> <var>doc</var>, run the following steps: 
    <ol>
     <li data-md>
      <p>Let <var>window</var> be <var>doc</var>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global" id="ref-for-concept-relevant-global①">relevant global object</a>.</p>
     <li data-md>
      <p>Let <var>renderingTimestamp</var> be the <a data-link-type="dfn" href="https://w3c.github.io/hr-time/#dfn-current-high-resolution-time" id="ref-for-dfn-current-high-resolution-time②">current high resolution time</a>.</p>
     <li data-md>
      <p>For each <var>timingEntry</var> in <var>window</var>’s <a data-link-type="dfn" href="#pending-event-entries" id="ref-for-pending-event-entries①">pending event entries</a>:</p>
      <ol>
       <li data-md>
        <p>Let <var>start</var> be <var>timingEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime" id="ref-for-dom-performanceentry-starttime④">startTime</a></code> attribute value.</p>
       <li data-md>
        <p>Set <var>timingEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration②">duration</a></code> by running the following steps:</p>
        <ol>
         <li data-md>
          <p>Let <var>difference</var> be <code class="highlight"><var>renderingTimestamp</var> <c- o>-</c-> <var>start</var></code>.</p>
         <li data-md>
          <p>Set <var>timingEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration③">duration</a></code> to the result of rounding <var>difference</var> to the nearest multiple of 8.</p>
        </ol>
       <li data-md>
        <p>Let <var>name</var> be <var>timingEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name" id="ref-for-dom-performanceentry-name③">name</a></code> attribute value.</p>
       <li data-md>
        <p>Perform the following steps to update the event counts:</p>
        <ol>
         <li data-md>
          <p>Let <var>performance</var> be <var>window</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/hr-time/#dom-windoworworkerglobalscope-performance" id="ref-for-dom-windoworworkerglobalscope-performance">performance</a></code> attribute value.</p>
         <li data-md>
          <p>If <var>performance</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performance-eventcounts" id="ref-for-dom-performance-eventcounts①">eventCounts</a></code> attribute value does not contain a <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-map-entries" id="ref-for-dfn-map-entries">map entry</a> whose key is <var>name</var>, then:</p>
          <ol>
           <li data-md>
            <p>Let <var>mapEntry</var> be a new <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-map-entries" id="ref-for-dfn-map-entries①">map entry</a> with key equal to <var>name</var> and value equal to 1.</p>
           <li data-md>
            <p>Add <var>mapEntry</var> to <var>performance</var>’s <code class="idl"><a data-link-type="idl" href="#dom-performance-eventcounts" id="ref-for-dom-performance-eventcounts②">eventCounts</a></code> attribute value.</p>
          </ol>
         <li data-md>
          <p>Otherwise, increase the <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-map-entries" id="ref-for-dfn-map-entries②">map entry</a>’s value by 1.</p>
        </ol>
       <li data-md>
        <p>If <var>timingEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration④">duration</a></code> attribute value is greater than or equal to 104, then <a data-link-type="dfn" href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry" id="ref-for-dfn-queue-a-performanceentry">queue</a> <var>timingEntry</var>.</p>
       <li data-md>
        <p>If <var>window</var>’s <a data-link-type="dfn" href="#has-dispatched-input-event" id="ref-for-has-dispatched-input-event">has dispatched input event</a> is false, run the following steps:</p>
        <ol>
         <li data-md>
          <p>If <var>name</var> is "<code class="highlight">pointerdown</code>", run the following steps:</p>
          <ol>
           <li data-md>
            <p>Set <var>window</var>’s <a data-link-type="dfn" href="#pending-pointer-down" id="ref-for-pending-pointer-down">pending pointer down</a> to a copy of <var>timingEntry</var>.</p>
           <li data-md>
            <p>Set the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype③">entryType</a></code> of <var>window</var>’s <a data-link-type="dfn" href="#pending-pointer-down" id="ref-for-pending-pointer-down①">pending pointer down</a> to "<code class="highlight">first<c- o>-</c->input</code>".</p>
          </ol>
         <li data-md>
          <p>Otherwise, run the following steps:</p>
          <ol>
           <li data-md>
            <p>If <var>name</var> is "<code class="highlight">pointerup</code>" AND if <var>window</var>’s <a data-link-type="dfn" href="#pending-pointer-down" id="ref-for-pending-pointer-down②">pending pointer down</a> is not null, then:</p>
            <ol>
             <li data-md>
              <p>Set <var>window</var>’s <a data-link-type="dfn" href="#has-dispatched-input-event" id="ref-for-has-dispatched-input-event①">has dispatched input event</a> to true.</p>
             <li data-md>
              <p><a data-link-type="dfn" href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry" id="ref-for-dfn-queue-a-performanceentry①">Queue</a> <var>window</var>’s <a data-link-type="dfn" href="#pending-pointer-down" id="ref-for-pending-pointer-down③">pending pointer down</a>.</p>
            </ol>
           <li data-md>
            <p>Otherwise, if <var>name</var> is one of "<code class="highlight">click</code>", "<code class="highlight">keydown</code>" or "<code class="highlight">mousedown</code>", then:</p>
            <ol>
             <li data-md>
              <p>Set <var>window</var>’s <a data-link-type="dfn" href="#has-dispatched-input-event" id="ref-for-has-dispatched-input-event②">has dispatched input event</a> to true.</p>
             <li data-md>
              <p>Let <var>newFirstInputDelayEntry</var> be a copy of <var>timingEntry</var>.</p>
             <li data-md>
              <p>Set <var>newFirstInputDelayEntry</var>’s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype" id="ref-for-dom-performanceentry-entrytype④">entryType</a></code> to "<code class="highlight">first<c- o>-</c->input</code>".</p>
             <li data-md>
              <p><a data-link-type="dfn" href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry" id="ref-for-dfn-queue-a-performanceentry②">Queue the entry</a> <var>newFirstInputDelayEntry</var>.</p>
            </ol>
          </ol>
        </ol>
      </ol>
    </ol>
   </div>
   <h2 class="heading settled" data-level="4" id="priv-sec"><span class="secno">4. </span><span class="content">Security &amp; privacy considerations</span><a class="self-link" href="#priv-sec"></a></h2>
   <p>We would not like to introduce more high resolution timers to the web platform due to the security concerns entailed by such timers.
Event handler timestamps have the same accuracy as <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/hr-time/#dom-performance-now" id="ref-for-dom-performance-now①">performance.now()</a></code>.
Since <code class="idl"><a data-link-type="idl" href="#dom-performanceeventtiming-processingstart" id="ref-for-dom-performanceeventtiming-processingstart⑤">processingStart</a></code> and <code class="idl"><a data-link-type="idl" href="#dom-performanceeventtiming-processingend" id="ref-for-dom-performanceeventtiming-processingend④">processingEnd</a></code> could be computed without using this API,
exposing these attributes does not produce new attack surfaces.
Thus, <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration⑤">duration</a></code> is the only one which requires further consideration.</p>
   <p>The <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration⑥">duration</a></code> has an 8 millisecond granularity (it is computed as such by performing rounding).
Thus, a high resolution timer cannot be produced from this timestamps.
However, it does introduce new information that is not readily available to web developers: the time pixels draw after an event has been processed.
We do not find security or privacy concerns on exposing the timestamp, especially given its granularity.
In an effort to expose the minimal amount of new information that is useful, we decided to pick 8 milliseconds as the granularity.
This allows relatively precise timing even for 120Hz displays.</p>
   <p>The choice of 104ms as the cutoff value for the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration" id="ref-for-dom-performanceentry-duration⑦">duration</a></code> is just the first multiple of 8 greater than 100ms.
An event whose rounded duration is greater than or equal to 104ms will have its pre-rounded duration greater than or equal to 100ms.
Such events are not handled in accordance with the RAIL performance model, which suggests applications respond within 100ms to user input.</p>
  </main>
  <div data-fill-with="conformance">
   <h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p> Conformance requirements are expressed with a combination of descriptive assertions and RFC 2119 terminology.
            The key words “MUST”, “MUST NOT”, “REQUIRED”, “SHALL”, “SHALL NOT”, “SHOULD”, “SHOULD NOT”, “RECOMMENDED”, “MAY”, and “OPTIONAL”
            in the normative parts of this document
            are to be interpreted as described in RFC 2119.
            However, for readability,
            these words do not appear in all uppercase letters in this specification. </p>
   <p> All of the text of this specification is normative
            except sections explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a> </p>
   <p> Examples in this specification are introduced with the words “for example”
            or are set apart from the normative text with <code>class="example"</code>, like this: </p>
   <div class="example" id="example-example"><a class="self-link" href="#example-example"></a> This is an example of an informative example. </div>
   <p> Informative notes begin with the word “Note”
            and are set apart from the normative text with <code>class="note"</code>, like this: </p>
   <p class="note" role="note"> Note, this is an informative note. </p>
  </div>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#performanceeventtiming-associated-event">associated Event</a><span>, in §2.1</span>
   <li><a href="#dom-performanceeventtiming-cancelable">cancelable</a><span>, in §2.1</span>
   <li><a href="#considered-for-event-timing">considered for Event Timing</a><span>, in §1.1</span>
   <li><a href="#dispatch-pending-event-timing-entries">dispatch pending Event Timing entries</a><span>, in §3.5</span>
   <li><a href="#dom-performance-eventcounts">eventCounts</a><span>, in §2.3</span>
   <li><a href="#eventcounts">EventCounts</a><span>, in §2.2</span>
   <li><a href="#finalize-event-timing">finalize event timing</a><span>, in §3.4</span>
   <li><a href="#has-dispatched-input-event">has dispatched input event</a><span>, in §3.2</span>
   <li><a href="#initialize-event-timing">initialize event timing</a><span>, in §3.3</span>
   <li><a href="#pending-event-entries">pending event entries</a><span>, in §3.2</span>
   <li><a href="#pending-pointer-down">pending pointer down</a><span>, in §3.2</span>
   <li><a href="#performanceeventtiming">PerformanceEventTiming</a><span>, in §2.1</span>
   <li><a href="#dom-performanceeventtiming-processingend">processingEnd</a><span>, in §2.1</span>
   <li><a href="#dom-performanceeventtiming-processingstart">processingStart</a><span>, in §2.1</span>
   <li><a href="#dom-performanceeventtiming-tojson">toJSON()</a><span>, in §2.1</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-document">
   <a href="https://dom.spec.whatwg.org/#document">https://dom.spec.whatwg.org/#document</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-document">3.2. Modifications to the HTML specification</a> <a href="#ref-for-document①">(2)</a>
    <li><a href="#ref-for-document②">3.5. Dispatch pending Event Timing entries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event">
   <a href="https://dom.spec.whatwg.org/#event">https://dom.spec.whatwg.org/#event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event">2.1. PerformanceEventTiming interface</a>
    <li><a href="#ref-for-event①">3.1. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-cancelable">
   <a href="https://dom.spec.whatwg.org/#dom-event-cancelable">https://dom.spec.whatwg.org/#dom-event-cancelable</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-cancelable">2.1. PerformanceEventTiming interface</a>
    <li><a href="#ref-for-dom-event-cancelable①">3.3. Initialize event timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-dispatch">
   <a href="https://dom.spec.whatwg.org/#concept-event-dispatch">https://dom.spec.whatwg.org/#concept-event-dispatch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-dispatch">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-concept-event-dispatch①">(2)</a>
    <li><a href="#ref-for-concept-event-dispatch②">3.1. Modifications to the DOM specification</a> <a href="#ref-for-concept-event-dispatch③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-istrusted">
   <a href="https://dom.spec.whatwg.org/#dom-event-istrusted">https://dom.spec.whatwg.org/#dom-event-istrusted</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-istrusted">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-timestamp">
   <a href="https://dom.spec.whatwg.org/#dom-event-timestamp">https://dom.spec.whatwg.org/#dom-event-timestamp</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-timestamp">1. Introduction</a>
    <li><a href="#ref-for-dom-event-timestamp①">2.1. PerformanceEventTiming interface</a>
    <li><a href="#ref-for-dom-event-timestamp②">3.3. Initialize event timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-type">
   <a href="https://dom.spec.whatwg.org/#dom-event-type">https://dom.spec.whatwg.org/#dom-event-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-type">1.1. Events exposed</a>
    <li><a href="#ref-for-dom-event-type①">2.1. PerformanceEventTiming interface</a>
    <li><a href="#ref-for-dom-event-type②">2.2. EventCounts interface</a> <a href="#ref-for-dom-event-type③">(2)</a>
    <li><a href="#ref-for-dom-event-type④">2.3. Extensions to the Performance interface</a>
    <li><a href="#ref-for-dom-event-type⑤">3.3. Initialize event timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-def-domhighrestimestamp">
   <a href="https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp">https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-def-domhighrestimestamp">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-idl-def-domhighrestimestamp①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-performance">
   <a href="https://w3c.github.io/hr-time/#dfn-performance">https://w3c.github.io/hr-time/#dfn-performance</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-performance">2.3. Extensions to the Performance interface</a> <a href="#ref-for-dfn-performance①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-current-high-resolution-time">
   <a href="https://w3c.github.io/hr-time/#dfn-current-high-resolution-time">https://w3c.github.io/hr-time/#dfn-current-high-resolution-time</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-current-high-resolution-time">3.1. Modifications to the DOM specification</a> <a href="#ref-for-dfn-current-high-resolution-time①">(2)</a>
    <li><a href="#ref-for-dfn-current-high-resolution-time②">3.5. Dispatch pending Event Timing entries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performance-now">
   <a href="https://w3c.github.io/hr-time/#dom-performance-now">https://w3c.github.io/hr-time/#dom-performance-now</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performance-now">1. Introduction</a>
    <li><a href="#ref-for-dom-performance-now①">4. Security &amp; privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-windoworworkerglobalscope-performance">
   <a href="https://w3c.github.io/hr-time/#dom-windoworworkerglobalscope-performance">https://w3c.github.io/hr-time/#dom-windoworworkerglobalscope-performance</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-windoworworkerglobalscope-performance">3.5. Dispatch pending Event Timing entries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-window">
   <a href="https://html.spec.whatwg.org/multipage/window-object.html#window">https://html.spec.whatwg.org/multipage/window-object.html#window</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-window">2.1. PerformanceEventTiming interface</a>
    <li><a href="#ref-for-window①">3.2. Modifications to the HTML specification</a> <a href="#ref-for-window②">(2)</a> <a href="#ref-for-window③">(3)</a>
    <li><a href="#ref-for-window④">3.4. Finalize event timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-dnd-drag">
   <a href="https://html.spec.whatwg.org/multipage/#event-dnd-drag">https://html.spec.whatwg.org/multipage/#event-dnd-drag</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-dnd-drag">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-dnd-dragend">
   <a href="https://html.spec.whatwg.org/multipage/#event-dnd-dragend">https://html.spec.whatwg.org/multipage/#event-dnd-dragend</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-dnd-dragend">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-dnd-dragenter">
   <a href="https://html.spec.whatwg.org/multipage/#event-dnd-dragenter">https://html.spec.whatwg.org/multipage/#event-dnd-dragenter</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-dnd-dragenter">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-dnd-dragexit">
   <a href="https://html.spec.whatwg.org/multipage/#event-dnd-dragexit">https://html.spec.whatwg.org/multipage/#event-dnd-dragexit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-dnd-dragexit">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-dnd-dragleave">
   <a href="https://html.spec.whatwg.org/multipage/#event-dnd-dragleave">https://html.spec.whatwg.org/multipage/#event-dnd-dragleave</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-dnd-dragleave">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-dnd-dragover">
   <a href="https://html.spec.whatwg.org/multipage/#event-dnd-dragover">https://html.spec.whatwg.org/multipage/#event-dnd-dragover</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-dnd-dragover">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-dnd-dragstart">
   <a href="https://html.spec.whatwg.org/multipage/#event-dnd-dragstart">https://html.spec.whatwg.org/multipage/#event-dnd-dragstart</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-dnd-dragstart">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-dnd-drop">
   <a href="https://html.spec.whatwg.org/multipage/#event-dnd-drop">https://html.spec.whatwg.org/multipage/#event-dnd-drop</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-dnd-drop">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-loop-processing-model">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model">https://html.spec.whatwg.org/multipage/webappapis.html#event-loop-processing-model</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-loop-processing-model">3.2. Modifications to the HTML specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fully-active">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#fully-active">https://html.spec.whatwg.org/multipage/browsers.html#fully-active</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fully-active">3.2. Modifications to the HTML specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-relevant-global">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global">https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-global</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-relevant-global">3.4. Finalize event timing</a>
    <li><a href="#ref-for-concept-relevant-global①">3.5. Dispatch pending Event Timing entries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-update-the-rendering">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering">https://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-update-the-rendering">2.1. PerformanceEventTiming interface</a>
    <li><a href="#ref-for-update-the-rendering①">3.2. Modifications to the HTML specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-mark-paint-timing">
   <a href="https://w3c.github.io/paint-timing/#mark-paint-timing">https://w3c.github.io/paint-timing/#mark-paint-timing</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-mark-paint-timing">3.2. Modifications to the HTML specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-performanceentry-interface">
   <a href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface">https://w3c.github.io/performance-timeline/#the-performanceentry-interface</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-performanceentry-interface">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-the-performanceentry-interface①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-duration">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-duration">https://w3c.github.io/performance-timeline/#dom-performanceentry-duration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-duration">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-dom-performanceentry-duration①">(2)</a>
    <li><a href="#ref-for-dom-performanceentry-duration②">3.5. Dispatch pending Event Timing entries</a> <a href="#ref-for-dom-performanceentry-duration③">(2)</a> <a href="#ref-for-dom-performanceentry-duration④">(3)</a>
    <li><a href="#ref-for-dom-performanceentry-duration⑤">4. Security &amp; privacy considerations</a> <a href="#ref-for-dom-performanceentry-duration⑥">(2)</a> <a href="#ref-for-dom-performanceentry-duration⑦">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-entrytype">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype">https://w3c.github.io/performance-timeline/#dom-performanceentry-entrytype</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-entrytype">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-dom-performanceentry-entrytype①">(2)</a>
    <li><a href="#ref-for-dom-performanceentry-entrytype②">3.3. Initialize event timing</a>
    <li><a href="#ref-for-dom-performanceentry-entrytype③">3.5. Dispatch pending Event Timing entries</a> <a href="#ref-for-dom-performanceentry-entrytype④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-name">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-name">https://w3c.github.io/performance-timeline/#dom-performanceentry-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-name">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-dom-performanceentry-name①">(2)</a>
    <li><a href="#ref-for-dom-performanceentry-name②">3.3. Initialize event timing</a>
    <li><a href="#ref-for-dom-performanceentry-name③">3.5. Dispatch pending Event Timing entries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-queue-a-performanceentry">
   <a href="https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry">https://w3c.github.io/performance-timeline/#dfn-queue-a-performanceentry</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-queue-a-performanceentry">3.5. Dispatch pending Event Timing entries</a> <a href="#ref-for-dfn-queue-a-performanceentry①">(2)</a> <a href="#ref-for-dfn-queue-a-performanceentry②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-performanceentry-starttime">
   <a href="https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime">https://w3c.github.io/performance-timeline/#dom-performanceentry-starttime</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceentry-starttime">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-dom-performanceentry-starttime①">(2)</a> <a href="#ref-for-dom-performanceentry-starttime②">(3)</a>
    <li><a href="#ref-for-dom-performanceentry-starttime③">3.3. Initialize event timing</a>
    <li><a href="#ref-for-dom-performanceentry-starttime④">3.5. Dispatch pending Event Timing entries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-supportedentrytypes-attribute">
   <a href="https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute">https://w3c.github.io/performance-timeline/#supportedentrytypes-attribute</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-supportedentrytypes-attribute">2.1. PerformanceEventTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-gotpointercapture-event">
   <a href="https://w3c.github.io/pointerevents/#the-gotpointercapture-event">https://w3c.github.io/pointerevents/#the-gotpointercapture-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-gotpointercapture-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-lostpointercapture-event">
   <a href="https://w3c.github.io/pointerevents/#the-lostpointercapture-event">https://w3c.github.io/pointerevents/#the-lostpointercapture-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-lostpointercapture-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-pointercancel-event">
   <a href="https://w3c.github.io/pointerevents/#the-pointercancel-event">https://w3c.github.io/pointerevents/#the-pointercancel-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-pointercancel-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-pointerdown-event">
   <a href="https://w3c.github.io/pointerevents/#the-pointerdown-event">https://w3c.github.io/pointerevents/#the-pointerdown-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-pointerdown-event">1.1. Events exposed</a> <a href="#ref-for-the-pointerdown-event①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-pointerenter-event">
   <a href="https://w3c.github.io/pointerevents/#the-pointerenter-event">https://w3c.github.io/pointerevents/#the-pointerenter-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-pointerenter-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-pointerleave-event">
   <a href="https://w3c.github.io/pointerevents/#the-pointerleave-event">https://w3c.github.io/pointerevents/#the-pointerleave-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-pointerleave-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-pointermove-event">
   <a href="https://w3c.github.io/pointerevents/#the-pointermove-event">https://w3c.github.io/pointerevents/#the-pointermove-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-pointermove-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-pointerout-event">
   <a href="https://w3c.github.io/pointerevents/#the-pointerout-event">https://w3c.github.io/pointerevents/#the-pointerout-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-pointerout-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-pointerover-event">
   <a href="https://w3c.github.io/pointerevents/#the-pointerover-event">https://w3c.github.io/pointerevents/#the-pointerover-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-pointerover-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-pointerup-event">
   <a href="https://w3c.github.io/pointerevents/#the-pointerup-event">https://w3c.github.io/pointerevents/#the-pointerup-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-pointerup-event">1.1. Events exposed</a> <a href="#ref-for-the-pointerup-event①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-touchcancel-event">
   <a href="https://w3c.github.io/touch-events/#the-touchcancel-event">https://w3c.github.io/touch-events/#the-touchcancel-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-touchcancel-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-touchend-event">
   <a href="https://w3c.github.io/touch-events/#the-touchend-event">https://w3c.github.io/touch-events/#the-touchend-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-touchend-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-touchmove-event">
   <a href="https://w3c.github.io/touch-events/#the-touchmove-event">https://w3c.github.io/touch-events/#the-touchmove-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-touchmove-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-the-touchstart-event">
   <a href="https://w3c.github.io/touch-events/#the-touchstart-event">https://w3c.github.io/touch-events/#the-touchstart-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-the-touchstart-event">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-auxclick">
   <a href="https://w3c.github.io/uievents/#event-type-auxclick">https://w3c.github.io/uievents/#event-type-auxclick</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-auxclick">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-beforeinput">
   <a href="https://w3c.github.io/uievents/#event-type-beforeinput">https://w3c.github.io/uievents/#event-type-beforeinput</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-beforeinput">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-click">
   <a href="https://w3c.github.io/uievents/#event-type-click">https://w3c.github.io/uievents/#event-type-click</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-click">1.1. Events exposed</a> <a href="#ref-for-event-type-click①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-compositionend">
   <a href="https://w3c.github.io/uievents/#event-type-compositionend">https://w3c.github.io/uievents/#event-type-compositionend</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-compositionend">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-compositionstart">
   <a href="https://w3c.github.io/uievents/#event-type-compositionstart">https://w3c.github.io/uievents/#event-type-compositionstart</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-compositionstart">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-compositionupdate">
   <a href="https://w3c.github.io/uievents/#event-type-compositionupdate">https://w3c.github.io/uievents/#event-type-compositionupdate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-compositionupdate">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-dblclick">
   <a href="https://w3c.github.io/uievents/#event-type-dblclick">https://w3c.github.io/uievents/#event-type-dblclick</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-dblclick">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-input">
   <a href="https://w3c.github.io/uievents/#event-type-input">https://w3c.github.io/uievents/#event-type-input</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-input">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-keydown">
   <a href="https://w3c.github.io/uievents/#event-type-keydown">https://w3c.github.io/uievents/#event-type-keydown</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-keydown">1.1. Events exposed</a> <a href="#ref-for-event-type-keydown①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-keyup">
   <a href="https://w3c.github.io/uievents/#event-type-keyup">https://w3c.github.io/uievents/#event-type-keyup</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-keyup">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-mousedown">
   <a href="https://w3c.github.io/uievents/#event-type-mousedown">https://w3c.github.io/uievents/#event-type-mousedown</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-mousedown">1.1. Events exposed</a> <a href="#ref-for-event-type-mousedown①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-mouseenter">
   <a href="https://w3c.github.io/uievents/#event-type-mouseenter">https://w3c.github.io/uievents/#event-type-mouseenter</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-mouseenter">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-mouseleave">
   <a href="https://w3c.github.io/uievents/#event-type-mouseleave">https://w3c.github.io/uievents/#event-type-mouseleave</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-mouseleave">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-mousemove">
   <a href="https://w3c.github.io/uievents/#event-type-mousemove">https://w3c.github.io/uievents/#event-type-mousemove</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-mousemove">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-mouseout">
   <a href="https://w3c.github.io/uievents/#event-type-mouseout">https://w3c.github.io/uievents/#event-type-mouseout</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-mouseout">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-mouseover">
   <a href="https://w3c.github.io/uievents/#event-type-mouseover">https://w3c.github.io/uievents/#event-type-mouseover</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-mouseover">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-mouseup">
   <a href="https://w3c.github.io/uievents/#event-type-mouseup">https://w3c.github.io/uievents/#event-type-mouseup</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-mouseup">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-type-wheel">
   <a href="https://w3c.github.io/uievents/#event-type-wheel">https://w3c.github.io/uievents/#event-type-wheel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-type-wheel">1.1. Events exposed</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">2.2. EventCounts interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Default">
   <a href="https://heycam.github.io/webidl/#Default">https://heycam.github.io/webidl/#Default</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Default">2.1. PerformanceEventTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">2.1. PerformanceEventTiming interface</a>
    <li><a href="#ref-for-Exposed①">2.2. EventCounts interface</a>
    <li><a href="#ref-for-Exposed②">2.3. Extensions to the Performance interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">2.3. Extensions to the Performance interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">2.1. PerformanceEventTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-implements">
   <a href="https://heycam.github.io/webidl/#implements">https://heycam.github.io/webidl/#implements</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-implements">3.4. Finalize event timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-map-entries">
   <a href="https://heycam.github.io/webidl/#dfn-map-entries">https://heycam.github.io/webidl/#dfn-map-entries</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-map-entries">3.5. Dispatch pending Event Timing entries</a> <a href="#ref-for-dfn-map-entries①">(2)</a> <a href="#ref-for-dfn-map-entries②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-object">
   <a href="https://heycam.github.io/webidl/#idl-object">https://heycam.github.io/webidl/#idl-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-object">2.1. PerformanceEventTiming interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-long-long">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-long-long">https://heycam.github.io/webidl/#idl-unsigned-long-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-long-long">2.2. EventCounts interface</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-document" style="color:initial">Document</span>
     <li><span class="dfn-paneled" id="term-for-event" style="color:initial">Event</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-cancelable" style="color:initial">cancelable</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-dispatch" style="color:initial">event dispatch algorithm</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-istrusted" style="color:initial">isTrusted</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-timestamp" style="color:initial">timeStamp</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-type" style="color:initial">type</span>
    </ul>
   <li>
    <a data-link-type="biblio">[hr-time-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-def-domhighrestimestamp" style="color:initial">DOMHighResTimeStamp</span>
     <li><span class="dfn-paneled" id="term-for-dfn-performance" style="color:initial">Performance</span>
     <li><span class="dfn-paneled" id="term-for-dfn-current-high-resolution-time" style="color:initial">current high resolution time</span>
     <li><span class="dfn-paneled" id="term-for-dom-performance-now" style="color:initial">now()</span>
     <li><span class="dfn-paneled" id="term-for-dom-windoworworkerglobalscope-performance" style="color:initial">performance</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-window" style="color:initial">Window</span>
     <li><span class="dfn-paneled" id="term-for-event-dnd-drag" style="color:initial">drag</span>
     <li><span class="dfn-paneled" id="term-for-event-dnd-dragend" style="color:initial">dragend</span>
     <li><span class="dfn-paneled" id="term-for-event-dnd-dragenter" style="color:initial">dragenter</span>
     <li><span class="dfn-paneled" id="term-for-event-dnd-dragexit" style="color:initial">dragexit</span>
     <li><span class="dfn-paneled" id="term-for-event-dnd-dragleave" style="color:initial">dragleave</span>
     <li><span class="dfn-paneled" id="term-for-event-dnd-dragover" style="color:initial">dragover</span>
     <li><span class="dfn-paneled" id="term-for-event-dnd-dragstart" style="color:initial">dragstart</span>
     <li><span class="dfn-paneled" id="term-for-event-dnd-drop" style="color:initial">drop</span>
     <li><span class="dfn-paneled" id="term-for-event-loop-processing-model" style="color:initial">event loop processing model</span>
     <li><span class="dfn-paneled" id="term-for-fully-active" style="color:initial">fully active</span>
     <li><span class="dfn-paneled" id="term-for-concept-relevant-global" style="color:initial">relevant global object</span>
     <li><span class="dfn-paneled" id="term-for-update-the-rendering" style="color:initial">update the rendering</span>
    </ul>
   <li>
    <a data-link-type="biblio">[paint-timing]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-mark-paint-timing" style="color:initial">mark paint timing</span>
    </ul>
   <li>
    <a data-link-type="biblio">[performance-timeline-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-performanceentry-interface" style="color:initial">PerformanceEntry</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-duration" style="color:initial">duration</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-entrytype" style="color:initial">entryType</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-name" style="color:initial">name</span>
     <li><span class="dfn-paneled" id="term-for-dfn-queue-a-performanceentry" style="color:initial">queue the entry</span>
     <li><span class="dfn-paneled" id="term-for-dom-performanceentry-starttime" style="color:initial">startTime</span>
     <li><span class="dfn-paneled" id="term-for-supportedentrytypes-attribute" style="color:initial">supportedEntryTypes</span>
    </ul>
   <li>
    <a data-link-type="biblio">[pointerevents]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-gotpointercapture-event" style="color:initial">gotpointercapture</span>
     <li><span class="dfn-paneled" id="term-for-the-lostpointercapture-event" style="color:initial">lostpointercapture</span>
     <li><span class="dfn-paneled" id="term-for-the-pointercancel-event" style="color:initial">pointercancel</span>
     <li><span class="dfn-paneled" id="term-for-the-pointerdown-event" style="color:initial">pointerdown</span>
     <li><span class="dfn-paneled" id="term-for-the-pointerenter-event" style="color:initial">pointerenter</span>
     <li><span class="dfn-paneled" id="term-for-the-pointerleave-event" style="color:initial">pointerleave</span>
     <li><span class="dfn-paneled" id="term-for-the-pointermove-event" style="color:initial">pointermove</span>
     <li><span class="dfn-paneled" id="term-for-the-pointerout-event" style="color:initial">pointerout</span>
     <li><span class="dfn-paneled" id="term-for-the-pointerover-event" style="color:initial">pointerover</span>
     <li><span class="dfn-paneled" id="term-for-the-pointerup-event" style="color:initial">pointerup</span>
    </ul>
   <li>
    <a data-link-type="biblio">[touch-events]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-the-touchcancel-event" style="color:initial">touchcancel</span>
     <li><span class="dfn-paneled" id="term-for-the-touchend-event" style="color:initial">touchend</span>
     <li><span class="dfn-paneled" id="term-for-the-touchmove-event" style="color:initial">touchmove</span>
     <li><span class="dfn-paneled" id="term-for-the-touchstart-event" style="color:initial">touchstart</span>
    </ul>
   <li>
    <a data-link-type="biblio">[uievents]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-event-type-auxclick" style="color:initial">auxclick</span>
     <li><span class="dfn-paneled" id="term-for-event-type-beforeinput" style="color:initial">beforeinput</span>
     <li><span class="dfn-paneled" id="term-for-event-type-click" style="color:initial">click</span>
     <li><span class="dfn-paneled" id="term-for-event-type-compositionend" style="color:initial">compositionend</span>
     <li><span class="dfn-paneled" id="term-for-event-type-compositionstart" style="color:initial">compositionstart</span>
     <li><span class="dfn-paneled" id="term-for-event-type-compositionupdate" style="color:initial">compositionupdate</span>
     <li><span class="dfn-paneled" id="term-for-event-type-dblclick" style="color:initial">dblclick</span>
     <li><span class="dfn-paneled" id="term-for-event-type-input" style="color:initial">input</span>
     <li><span class="dfn-paneled" id="term-for-event-type-keydown" style="color:initial">keydown</span>
     <li><span class="dfn-paneled" id="term-for-event-type-keyup" style="color:initial">keyup</span>
     <li><span class="dfn-paneled" id="term-for-event-type-mousedown" style="color:initial">mousedown</span>
     <li><span class="dfn-paneled" id="term-for-event-type-mouseenter" style="color:initial">mouseenter</span>
     <li><span class="dfn-paneled" id="term-for-event-type-mouseleave" style="color:initial">mouseleave</span>
     <li><span class="dfn-paneled" id="term-for-event-type-mousemove" style="color:initial">mousemove</span>
     <li><span class="dfn-paneled" id="term-for-event-type-mouseout" style="color:initial">mouseout</span>
     <li><span class="dfn-paneled" id="term-for-event-type-mouseover" style="color:initial">mouseover</span>
     <li><span class="dfn-paneled" id="term-for-event-type-mouseup" style="color:initial">mouseup</span>
     <li><span class="dfn-paneled" id="term-for-event-type-wheel" style="color:initial">wheel</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-Default" style="color:initial">Default</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-implements" style="color:initial">implements</span>
     <li><span class="dfn-paneled" id="term-for-dfn-map-entries" style="color:initial">map entries</span>
     <li><span class="dfn-paneled" id="term-for-idl-object" style="color:initial">object</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-long-long" style="color:initial">unsigned long long</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-hr-time-2">[HR-TIME-2]
   <dd>Ilya Grigorik; James Simonsen; Jatinder Mann. <a href="https://www.w3.org/TR/hr-time-2/">High Resolution Time Level 2</a>. 1 March 2018. CR. URL: <a href="https://www.w3.org/TR/hr-time-2/">https://www.w3.org/TR/hr-time-2/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-paint-timing">[PAINT-TIMING]
   <dd>Shubhie Panicker. <a href="https://www.w3.org/TR/paint-timing/">Paint Timing 1</a>. 7 September 2017. WD. URL: <a href="https://www.w3.org/TR/paint-timing/">https://www.w3.org/TR/paint-timing/</a>
   <dt id="biblio-performance-timeline-2">[PERFORMANCE-TIMELINE-2]
   <dd>Ilya Grigorik. <a href="https://www.w3.org/TR/performance-timeline-2/">Performance Timeline Level 2</a>. 23 April 2019. WD. URL: <a href="https://www.w3.org/TR/performance-timeline-2/">https://www.w3.org/TR/performance-timeline-2/</a>
   <dt id="biblio-pointerevents">[POINTEREVENTS]
   <dd>Jacob Rossi; Matt Brubeck. <a href="https://www.w3.org/TR/pointerevents/">Pointer Events</a>. 4 April 2019. REC. URL: <a href="https://www.w3.org/TR/pointerevents/">https://www.w3.org/TR/pointerevents/</a>
   <dt id="biblio-rfc2119">[RFC2119]
   <dd>S. Bradner. <a href="https://tools.ietf.org/html/rfc2119">Key words for use in RFCs to Indicate Requirement Levels</a>. March 1997. Best Current Practice. URL: <a href="https://tools.ietf.org/html/rfc2119">https://tools.ietf.org/html/rfc2119</a>
   <dt id="biblio-touch-events">[TOUCH-EVENTS]
   <dd>Doug Schepers; et al. <a href="https://www.w3.org/TR/touch-events/">Touch Events</a>. 10 October 2013. REC. URL: <a href="https://www.w3.org/TR/touch-events/">https://www.w3.org/TR/touch-events/</a>
   <dt id="biblio-uievents">[UIEVENTS]
   <dd>Gary Kacmarcik; Travis Leithead; Doug Schepers. <a href="https://www.w3.org/TR/uievents/">UI Events</a>. 30 May 2019. WD. URL: <a href="https://www.w3.org/TR/uievents/">https://www.w3.org/TR/uievents/</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. 15 December 2016. ED. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#performanceeventtiming"><code class="highlight"><c- g>PerformanceEventTiming</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/performance-timeline/#the-performanceentry-interface" id="ref-for-the-performanceentry-interface②"><c- n>PerformanceEntry</c-></a> {
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp" id="ref-for-idl-def-domhighrestimestamp②"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-performanceeventtiming-processingstart" id="ref-for-dom-performanceeventtiming-processingstart⑥"><c- g>processingStart</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://w3c.github.io/hr-time/#idl-def-domhighrestimestamp" id="ref-for-idl-def-domhighrestimestamp①①"><c- n>DOMHighResTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMHighResTimeStamp" href="#dom-performanceeventtiming-processingend" id="ref-for-dom-performanceeventtiming-processingend⑤"><c- g>processingEnd</c-></a>;
    <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-performanceeventtiming-cancelable" id="ref-for-dom-performanceeventtiming-cancelable③"><c- g>cancelable</c-></a>;
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Default" id="ref-for-Default①"><c- g>Default</c-></a>] <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a> <a href="#dom-performanceeventtiming-tojson"><code class="highlight"><c- g>toJSON</c-></code></a>();
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>interface</c-> <a href="#eventcounts"><code class="highlight"><c- g>EventCounts</c-></code></a> {
    <c- b>readonly</c-> <c- b>maplike</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a>, <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long-long" id="ref-for-idl-unsigned-long-long①"><c- b>unsigned</c-> <c- b>long</c-> <c- b>long</c-></a>>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>Window</c->]
<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/hr-time/#dfn-performance" id="ref-for-dfn-performance①①"><c- g>Performance</c-></a> {
    [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#eventcounts" id="ref-for-eventcounts②①"><c- n>EventCounts</c-></a> <a data-readonly data-type="EventCounts" href="#dom-performance-eventcounts"><code class="highlight"><c- g>eventCounts</c-></code></a>;
};

</pre>
  <aside class="dfn-panel" data-for="considered-for-event-timing">
   <b><a href="#considered-for-event-timing">#considered-for-event-timing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-considered-for-event-timing">3.3. Initialize event timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="performanceeventtiming">
   <b><a href="#performanceeventtiming">#performanceeventtiming</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-performanceeventtiming">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-performanceeventtiming①">(2)</a> <a href="#ref-for-performanceeventtiming②">(3)</a> <a href="#ref-for-performanceeventtiming③">(4)</a> <a href="#ref-for-performanceeventtiming④">(5)</a>
    <li><a href="#ref-for-performanceeventtiming⑤">2.2. EventCounts interface</a>
    <li><a href="#ref-for-performanceeventtiming⑥">3.2. Modifications to the HTML specification</a> <a href="#ref-for-performanceeventtiming⑦">(2)</a>
    <li><a href="#ref-for-performanceeventtiming⑧">3.3. Initialize event timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="performanceeventtiming-associated-event">
   <b><a href="#performanceeventtiming-associated-event">#performanceeventtiming-associated-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-performanceeventtiming-associated-event">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-performanceeventtiming-associated-event①">(2)</a> <a href="#ref-for-performanceeventtiming-associated-event②">(3)</a> <a href="#ref-for-performanceeventtiming-associated-event③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceeventtiming-processingstart">
   <b><a href="#dom-performanceeventtiming-processingstart">#dom-performanceeventtiming-processingstart</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceeventtiming-processingstart">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-dom-performanceeventtiming-processingstart①">(2)</a> <a href="#ref-for-dom-performanceeventtiming-processingstart②">(3)</a>
    <li><a href="#ref-for-dom-performanceeventtiming-processingstart③">3.1. Modifications to the DOM specification</a>
    <li><a href="#ref-for-dom-performanceeventtiming-processingstart④">3.3. Initialize event timing</a>
    <li><a href="#ref-for-dom-performanceeventtiming-processingstart⑤">4. Security &amp; privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceeventtiming-processingend">
   <b><a href="#dom-performanceeventtiming-processingend">#dom-performanceeventtiming-processingend</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceeventtiming-processingend">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-dom-performanceeventtiming-processingend①">(2)</a>
    <li><a href="#ref-for-dom-performanceeventtiming-processingend②">3.1. Modifications to the DOM specification</a>
    <li><a href="#ref-for-dom-performanceeventtiming-processingend③">3.4. Finalize event timing</a>
    <li><a href="#ref-for-dom-performanceeventtiming-processingend④">4. Security &amp; privacy considerations</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performanceeventtiming-cancelable">
   <b><a href="#dom-performanceeventtiming-cancelable">#dom-performanceeventtiming-cancelable</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performanceeventtiming-cancelable">2.1. PerformanceEventTiming interface</a> <a href="#ref-for-dom-performanceeventtiming-cancelable①">(2)</a>
    <li><a href="#ref-for-dom-performanceeventtiming-cancelable②">3.3. Initialize event timing</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="eventcounts">
   <b><a href="#eventcounts">#eventcounts</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventcounts">2.2. EventCounts interface</a> <a href="#ref-for-eventcounts①">(2)</a>
    <li><a href="#ref-for-eventcounts②">2.3. Extensions to the Performance interface</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-performance-eventcounts">
   <b><a href="#dom-performance-eventcounts">#dom-performance-eventcounts</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-performance-eventcounts">2.3. Extensions to the Performance interface</a>
    <li><a href="#ref-for-dom-performance-eventcounts①">3.5. Dispatch pending Event Timing entries</a> <a href="#ref-for-dom-performance-eventcounts②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pending-event-entries">
   <b><a href="#pending-event-entries">#pending-event-entries</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pending-event-entries">3.4. Finalize event timing</a>
    <li><a href="#ref-for-pending-event-entries①">3.5. Dispatch pending Event Timing entries</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="pending-pointer-down">
   <b><a href="#pending-pointer-down">#pending-pointer-down</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-pending-pointer-down">3.5. Dispatch pending Event Timing entries</a> <a href="#ref-for-pending-pointer-down①">(2)</a> <a href="#ref-for-pending-pointer-down②">(3)</a> <a href="#ref-for-pending-pointer-down③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="has-dispatched-input-event">
   <b><a href="#has-dispatched-input-event">#has-dispatched-input-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-has-dispatched-input-event">3.5. Dispatch pending Event Timing entries</a> <a href="#ref-for-has-dispatched-input-event①">(2)</a> <a href="#ref-for-has-dispatched-input-event②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="initialize-event-timing">
   <b><a href="#initialize-event-timing">#initialize-event-timing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-initialize-event-timing">3.1. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="finalize-event-timing">
   <b><a href="#finalize-event-timing">#finalize-event-timing</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-finalize-event-timing">3.1. Modifications to the DOM specification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dispatch-pending-event-timing-entries">
   <b><a href="#dispatch-pending-event-timing-entries">#dispatch-pending-event-timing-entries</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dispatch-pending-event-timing-entries">3.2. Modifications to the HTML specification</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>